<template>
	<view class="pages_intelligence" :style="{paddingTop: `${search.height+search.top+10}px`}">
		<myTabs :title="title" :isTrue="true" @goBlack="goBlack" :mybackgroundColor="'#fff'"></myTabs>
		<view class="cityBox" :style="{top: `${search.height+search.top+10}px`}">
			<view class="cityHeard" id="cityHeard">
				<view class="cityHeard_title">请选择要您的身份卡</view>
			</view>

			<view class="indexListBox"
				:style="{height : `calc(100vh - ${search.height+search.top+10}px - ${contentHeight}px)`}">
				<view class="businessItems" @click="searchs(index)" v-for="(item,index) in businessArr" :key="index">
					<image :class="listIndex==index? 'businessItemsAct' : 'businessItemsBj'" mode="aspectFill"
						:src="item.coverImg"></image>
				</view>
			</view>

		</view>
		<view :class="listIndex!=undefined? 'ensureButton' : 'noEnsureButton'" @click="ensure">
			确定选择
		</view>
		<unlockCommunity :unlockObj="unlockObj" :isSnsShow="isSnsShow" @unlock="unlock" @onUnlock="onUnlock">
		</unlockCommunity>

		<!-- 社区福利购物 -->
		<!-- <u-overlay :show="isXnsShow" @click="isXnsShow = false">
			<view class="codeBox" @click.stop="">
				<image v-if="unlockObj.poster" class="codeBoxBg" :src="unlockObj.poster"></image>
				<view class="codeBoxMainBox_botom" @click="directUnlock">立即加购</view>
			</view>
		</u-overlay> -->

		<noticeModal :show="isNoticeShow" title="您即将进入体验版"
			content="<p>可免费查看<strong>当前所选城市和品类的部分菜品大数据和餐饮商机评估板块全部内容</strong>，进入后无法切换城市和品类，请慎重选择。</p>"
			@close="isNoticeShow=false" confirmText="进入体验版" @confirm="ff_marketingConfirm" cancelText="返回重选"
			:showCancelButton="true" @cancel="ff_marketingClose"></noticeModal>

		<noticeModal :show="isXnsShow" title="开通多个城市餐饮大数据" confirmText="我知道了" @confirm="isXnsShow=false"
			@close="isXnsShow=false">
			<slot>
				<view>适宜于在多个城市连锁经营的餐饮品牌<br>功能开发中，敬请期待</view>
			</slot>
		</noticeModal>

	</view>


</template>

<script>
	import myTabs from "@/components/myTabs/index.vue"
	import unlockCommunity from '../../components/unlockCommunity/index.vue';
	import noticeModal from '../../components/noticeModal/index.vue';

	export default {
		components: {
			myTabs,
			unlockCommunity,
			noticeModal,
		},
		data() {
			return {
				isXnsShow: false,
				isSnsShow: false,
				listIndex: undefined,
				contentHeight: 0,
				title: '用户身份选择',
				businessArr: [],
				unlockObj: {},
				marketingShow: false,
				// 提示弹窗展示
				isNoticeShow: false,
			}
		},
		onLoad() {
			// #ifndef H5
			let search = uni.getMenuButtonBoundingClientRect()
			this.$store.commit('updataSearch', search);
			// #endif
			this.initBusinessArr();

			// 判断该用户是否是第一次解锁社区
			if (this.user && this.user.communityList && this.user.communityList.length != 0) {
				this.second();
			} else {
				this.initgetCity();
			}

		},
		onReady() {
			const query = uni.createSelectorQuery().in(this);
			query.select("#cityHeard").boundingClientRect(data => {
				this.contentHeight = data.height;
			}).exec();
		},
		watch: {
			location(newVal, oldVal) {
				// 判断该用户是否是第一次解锁社区
				if (this.user && this.user.communityList && this.user.communityList.length != 0) {
					this.second();
				} else {
					this.initgetCity();
				}
			}
		},
		computed: {
			search() {
				return this.$store.state.search;
			},
			user() {
				return this.$store.state.user;
			},
			location() {
				return this.$store.state.location;
			},
		},
		methods: {
			ff_marketingConfirm() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			ff_marketingClose() {
				this.isNoticeShow = false
				uni.navigateTo({
					url: '/package/citySelection/index'
				})
			},
			initgetCity() {
				let location = uni.getStorageSync('location')
				this.$api.getCity({
					cityId: location.id
				}).then(res => {
					if (res.code == 200) {
						this.unlockObj = res.data;
					}
				})
			},
			directUnlock() {
				let location = uni.getStorageSync('location');
				uni.navigateTo({
					url: `/package/payment/index?buyType=30&communityId=${location.communityId}&priceId=${this.unlockObj.priceId}&informationTitle=${location.name}加购福利价&url=/pages/index/index&isComCode=true`
				});

			},
			unlock(title, priceId, communityId, hasDiscount) {
				let location = uni.getStorageSync('location');
				if (hasDiscount) {
					uni.navigateTo({
						url: `/package/unlock/index?priceId=${priceId}&communityId=${location.communityId}`
					});
				} else {
					uni.navigateTo({
						url: `/package/payment/index?buyType=30&communityId=${location.communityId}&priceId=${priceId}&informationTitle=${title}&url=/pages/index/index&isComCode=true`
					});
				}
			},
			onUnlock() {
				this.isSnsShow = false;
				this.isNoticeShow = true

			},
			initBusinessArr() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.$api.identityGetList().then(res => {
					console.log('res', res)
					this.businessArr = res.data;
					uni.hideLoading();
					if (this.user) {
						this.businessArr.forEach((item, index) => {
							if (this.user.identityId == item.identityId) {
								this.listIndex = index
							}
						})
					}

				})
			},

			searchs(index) {
				this.listIndex = index;
			},
			ensure() {
				if (!isNaN(this.listIndex) || this.listIndex) {
					// 判断是否加入该社区
					let location = uni.getStorageSync('location');
					if (this.user && this.user.communityList) {
						let isPass = false;
						this.user.communityList.forEach(item => {
							if (location.communityId == item.communityId) {
								isPass = true;
							}
						})
						if (isPass) {
							uni.showToast({
								title: '已加入该社区',
								mask: true,
								icon: 'none'
							})
							return
						}
					}

					uni.showLoading({
						title: '加载中',
						mask: true
					})

					this.$api.accountWxEditInfo({
						identityId: this.businessArr[this.listIndex].identityId
					}).then(res => {
						if (res.code == 200) {
							this.$store.commit('updataUser', res.data.user);
							uni.showToast({
								title: '选择成功',
								icon: 'none',
								mask: true
							});

							// 判断该用户是否是第一次解锁社区
							if (this.user && this.user.communityList && this.user.communityList.length != 0) {
								this.isXnsShow = true;
							} else {
								this.isSnsShow = true;
							}



							// setTimeout(()=>{
							// 	uni.redirectTo({
							// 		url: '/pages/index/index'
							// 	})
							// },1000)
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '请选择身份卡',
						mask: true
					})
				}


			},
			second() {
				let location = uni.getStorageSync('location');
				this.$api.communityPriceRepurchase({
					cityId: location.id
				}).then(res => {
					if (res.code == 200) {
						this.unlockObj = res.data;
					}
				})
			},
			changIndex(oneIndex, twoIndex) {
				this.listIndex = [oneIndex, twoIndex];
			},
			goBlack() {
				uni.navigateBack();
			}
		}
	}
</script>
<style lang="scss" scoped>
	.pages_intelligence {
		background-color: #fff;
		min-height: 100vh;
		padding-bottom: 150rpx;
		box-sizing: border-box;

		/deep/.u-modal__title {
			line-height: 56rpx !important;
			padding: 50rpx 70rpx 0;
		}

		/deep/.u-modal__content {
			padding: 12px 25px 15px 25px !important;
		}

		.codeBox {
			width: 638rpx;
			height: 534rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border-radius: 24rpx;
			overflow: hidden;
			text-align: center;
			padding: 40rpx;
			box-sizing: border-box;
		}

		.codeBoxBg {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: -1;
		}

		.codeBoxMainBox_botom {
			width: 558rpx;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: bold;
			color: #000000;
			background: #ffda2d;
			opacity: 1;
			border-radius: 24rpx;
			text-align: center;
		}

		.codeBoxMainBox {
			margin-top: 200rpx;

			p {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: #999999;
				margin-bottom: 32rpx;
				text-align: center;
			}

			p:nth-child(1) {
				padding: 0 24rpx;

			}

			p:nth-child(2) {
				margin-bottom: 42rpx;
			}
		}

		.codeBoxMainBox_top {
			height: 50rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 50rpx;
			color: #000000;
			margin-bottom: 32rpx;
		}

		.codeBoxMainBox_topText {
			margin-bottom: 40rpx;

			p {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: #666666;
			}
		}

		.codeBoxMainBox_topImg {
			border-radius: 24rpx;
			width: 296rpx;
			height: 296rpx;
			margin: 0 auto;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.codeBoxMainBox_botom {
			height: 110rpx;
			line-height: 110rpx;
			text-align: center;
			font-size: 16px;
			font-family: 蘋方-簡;
			color: #333;
			font-weight: bold;
			border-top: 1rpx solid #ddd;
			box-sizing: border-box;
			position: absolute;
			bottom: 40rpx;
		}

		.businessItems {
			width: 686rpx;
			height: 240rpx;
			background: linear-gradient(153deg, #FFE87F 0%, #FFDA2D 100%);
			opacity: 1;
			border-radius: 16rpx;
			position: relative;
			box-sizing: border-box;
			margin: 0 auto;
			margin-bottom: 32rpx;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

		}

		.businessItemsAct {
			width: 100%;
			height: 100%;
			filter: none;
			opacity: 1;
		}

		.noEnsureButton {
			width: 558rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #efefef;
			opacity: 1;
			border-radius: 24rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			color: #999;
			text-align: center;
			margin: 48rpx auto;
			position: fixed;
			bottom: 0%;
			left: 50%;
			transform: translateX(-50%);
		}

		.businessItemsBj {
			width: 100%;
			height: 100%;
			filter: grayscale(100%);
			opacity: .9;


		}

		.businessItemsTop {
			display: flex;
			justify-content: space-between;

			span {
				display: inline-block;
				height: 32rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 32rpx;
				color: #333333;

			}

			image {
				width: 302rpx;
				height: 32rpx;
			}
		}

		.businessItemsBotton {
			height: 80rpx;
			font-size: 56rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			justify-content: space-between;
			display: flex;

			image {
				width: 80rpx;
				height: 80rpx;
			}

		}

		.ensureButton {
			width: 558rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #FFDA2D;
			opacity: 1;
			border-radius: 24rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			color: #000000;
			text-align: center;
			margin: 48rpx auto;
			position: fixed;
			bottom: 0%;
			left: 50%;
			transform: translateX(-50%);
		}

		.indexListBox {
			overflow: scroll;

		}

		/deep/.u-index-list {
			padding-bottom: 150rpx;
		}

		/deep/.u-index-list__letter {
			display: none;
		}

		/deep/.u-index-anchor {
			background-color: #f7f7f7 !important;
			color: #999999 !important;
		}

		/deep/.list-cell {
			background-color: #fff;
			height: 104rpx;
			line-height: 104rpx;
			padding: 0 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;

		}

		.list-cell:not(:last-child) {
			&::after {
				content: '';
				width: 90%;
				height: 1rpx;
				background: #eaeaea;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);

			}
		}

		/deep/.listAct {
			background-color: #fffbe9;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		/deep/.u-index-item {
			width: 100% !important;
			background: #fff;
		}

		/deep/.u-border-bottom {
			border: none !important;
		}

		.cityHeard_bottonBox {
			display: flex;
			justify-content: space-between;
		}

		.cityHeard_bottonBoxLeft {
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 40rpx;
			color: #333333;
		}

		.cityHeard_bottonBoxRight {
			display: flex;
			align-content: center;

			span {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: #333333;
			}

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.cityBox {
			position: absolute;
			left: 0;
			width: 100%;
		}

		.cityHeard {
			width: 100%;
			padding: 32rpx;
			box-sizing: border-box;
			width: 100%;
			background-color: #fff;

		}

		.cityHeard_title {
			height: 50rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 50rpx;
			color: #000000;
		}

		.cityHeard_input {
			width: 686rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #f7f7f7;
			border: 2rpx solid #EFEFEF;
			opacity: 1;
			border-radius: 16rpx;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #999;
			text-align: center;
			margin: 32rpx 0;
		}
	}
</style>
